<template>
  <div>
    <div class="d-flex justify-content-between">
      <h4 class="panel-title">
        <span>实用工具</span>
        <span class="panel-title-num" v-show="taskTotal">{{ taskTotal }}</span>
      </h4>
    </div>

    <el-table :data="tasks" v-loading="loading" border class="table-sm w-100">
      <el-table-column label="工具名称" prop="taskName" align="center"></el-table-column>
      <el-table-column label="未处理/已处理" prop="taskCount" align="center">
        <template slot-scope="scope">
          <span v-if="[101, 102, 103, 101112].includes(scope.row.taskType)">-</span>
          <span v-else>{{ scope.row.taskCount }}/{{ scope.row.process }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="showDialog(scope.row)"
            icon="el-icon-edit"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <task-letter :visible.sync="letterVisible" :status="status" type="7"></task-letter>

    <task-contrack :visible.sync="contrackVisible" :status="status" type="8"></task-contrack>

    <task-notice :visible.sync="feeVisible" :status="status" type="15"></task-notice>

    <!-- <task-report-dialog :visible.sync="reportVisible"
                        type="18192021"></task-report-dialog> -->

    <task-postloan-in :visible.sync="arrivalInVisible"></task-postloan-in>
    <task-postloan-out :visible.sync="arrivalOutVisible"></task-postloan-out>

    <maturity-dialog :visible.sync="maturityVisible"></maturity-dialog>

    <sign-tool-dialog :visible.sync="signVisible" :docId="docId"></sign-tool-dialog>

    <!-- <task-fee :visible.sync="payVisible"></task-fee> -->

    <task-register-dialog :visible.sync="registerVisible" type="17"></task-register-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { enumTaskType } from '@/credit/plugins/enumTown'
import TaskLetter from '@/credit/views/county/index/myTask/TaskLetter'
import TaskContrack from '@/credit/views/county/index/myTask/TaskContrack'
import TaskNotice from '@/credit/views/county/index/myTask/TaskNotice'
// import TaskReportDialog from '@/credit/views/county/index/myTask/TaskReportDialog'
// import TaskPostloan from '@/credit/views/county/index/myTask/TaskPostloan'
import MaturityDialog from '@/credit/views/county/index/myTask/MaturityDialog'
import SignToolDialog from '@/credit/views/county/index/tools/SignToolDialog'
// import TaskFee from '@/credit/views/county/index/myTask/TaskFee'
import TaskRegisterDialog from '@/credit/views/county/index/myTask/TaskRegisterDialog'
import TaskPostloanIn from '@/credit/views/county/index/myTask/TaskPostloanIn'
import TaskPostloanOut from '@/credit/views/county/index/myTask/TaskPostloanOut'

import { add } from '@vimi/utils-tool'
// const enumConcat = {
//   // 18192021: '报表工具',
//   101112: '保费结算',
//   37383940: '电子签章'
// }
export default {
  components: {
    TaskLetter,
    TaskContrack,
    TaskNotice,
    MaturityDialog,
    SignToolDialog,
    TaskRegisterDialog,
    TaskPostloanIn,
    TaskPostloanOut,
  },
  props: {
    height: {
      type: Number,
      default: 300,
    },
    docId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      //   params: {
      //     index: 1,
      //     size: 5
      //   },
      status: '0',
      tableData: [],
      enumTaskType,
      loading: false,
      letterVisible: false,
      contrackVisible: false,
      maturityVisible: false,
      feeVisible: false,
      reportVisible: false,
      signVisible: false,
      countSignType: {},
      countSignService: {},
      registerVisible: false,
      arrivalInVisible: false,
      arrivalOutVisible: false,
    }
  },
  computed: {
    ...mapGetters(['myTaskCount', 'user', 'clientId']),
    isUserProvince() {
      return this.user.orgRegionLever === 1
    },
    tasks() {
      const data = []
      // const mustKeys = [37383940, 7, 8, 15]
      // mustKeys.forEach(item => {
      //   data.push({
      //     taskType: item,
      //     taskName: enumTaskType[item] || enumConcat[item],
      //     taskCount: this.getNum(item),
      //     process: this.getProcess(item)
      //   })
      // })
      data.push(
        {
          taskType: 8,
          taskName: '合同处理',
          taskCount: this.getNum(8),
          process: this.getProcess(8),
        },
        {
          taskType: 17,
          taskName: '放款登记',
          taskCount: this.getNum(17),
          process: this.getProcess(17),
        },
        {
          taskType: 101, // 自定义的
          taskName: '还款管理',
          taskCount: 0,
        },
        {
          taskType: 102,
          taskName: '到期项目',
          taskCount: 0,
        },
        {
          taskType: 103,
          taskName: '保后管理',
          taskCount: 0,
        }
      )
      return data
    },
    totalCount() {
      return this.tasks.length
    },
    taskTotal() {
      return this.tasks.reduce((prev, curr) => prev + curr.taskCount, 0)
    },
  },
  watch: {},
  created() {
    if (this.docId) {
      this.signVisible = true
    }
    this.getData()
  },
  mounted() {},
  methods: {
    getTypeNum(type) {
      return (this.myTaskCount && this.myTaskCount[type] && +this.myTaskCount[type].num) || 0
    },
    getNum(type) {
      switch (type) {
        case 1737383940:
          return [17, 37, 38, 39, 40].reduce((p, c) => {
            p += this.getTypeNum(c)
            return p
          }, 0)
        default:
          return this.getTypeNum(type)
      }
    },
    getTypeProcess(type) {
      return (this.myTaskCount && this.myTaskCount[type] && +this.myTaskCount[type].process) || 0
    },
    getProcess(type) {
      switch (type) {
        case 1737383940:
          return [17, 37, 38, 39, 40].reduce((p, c) => {
            p += this.getTypeProcess(c)
            return p
          }, 0)
        default:
          return this.getTypeProcess(type)
      }
    },
    async getData() {
      this.loading = true
      const params = {
        'service_id.eq': this.clientId,
        groupFields: ['sign_type', 'sign_status'],
        fields: ['sign_type', 'sign_status'],
        groupFunc: 'count(sign_type)',
      }
      const signParams = {
        'gua_org_id.eq': this.clientId,
        groupFields: ['sign_status'],
        fields: ['sign_status'],
        groupFunc: 'count(sign_type)',
      }
      Promise.all([
        this.$api.getData(this.$serviceName, 'sign_list_view', params),
        this.$api.getData(this.$serviceName, 'sign_list_view', signParams),
      ])
        .then(([res, res1]) => {
          const data = res?.data ?? []
          const sign = res1?.data ?? []
          this.countSignService = sign.reduce((pre, curr) => {
            if (+curr.sign_status < 2) {
              pre.no = add(pre.no || 0, curr.p)
            } else {
              pre.pass = add(pre.pass || 0, curr.p)
            }
            return pre
          }, {})
          this.countSignType = this.handleData(data)
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleData(data = []) {
      return data.reduce((pre, curr) => {
        const signType = pre[curr.sign_type] || { no: 0, pass: 0 }
        if (+curr.sign_status < 2) {
          signType.no = add(signType.no, curr.p)
          // pre.all.no = add(pre.all.no, curr.p)
        } else {
          signType.pass = add(signType.pass, curr.p)
          // pre.all.pass = add(pre.all.pass, curr.p)
        }
        pre[curr.sign_type] = signType
        return pre
      }, {})
    },
    showDialog(row) {
      switch (+row.taskType) {
        case 7:
          this.letterVisible = true
          break
        case 8:
          this.contrackVisible = true
          break
        case 101:
          this.maturityVisible = true
          break
        case 17:
          this.registerVisible = true
          break
        case 102:
          this.arrivalInVisible = true
          break
        case 103:
          this.arrivalOutVisible = true
          break
        case 37383940:
          this.signVisible = true
          break
        default:
          break
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.panel-title {
  position: relative;
  font-size: 1.142857rem;

  .panel-title-num {
    position: absolute;
    right: -1rem;
    padding: 0 0.21rem;
    border-radius: 1rem;
    background-color: red;
    font-size: 10px;
    color: #fff;
    line-height: 1;
    display: inline-block;
    text-align: center;
  }
}
/deep/ .el-table__header {
  width: 100% !important;
}
/deep/ .el-table__body {
  width: 100% !important;
}
</style>
